<template>
	<el-descriptions ref="ruleFormRef" :column="2" direction="vertical" v-loading="isLoading">

		<el-descriptions-item width="50%" :label='titles.id'>
			{{ isNullOrEmpty(formInline?.id) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.projectId'>
			{{ isNullOrEmpty(formInline?.projectId) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.projectName'>
			{{ isNullOrEmpty(formInline?.projectName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.productName'>
			{{ isNullOrEmpty(formInline?.productName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.deviceId'>
			{{ isNullOrEmpty(formInline?.deviceId) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.deviceSN'>
			{{ isNullOrEmpty(formInline?.deviceSN) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.alarmTitle'>
			{{ isNullOrEmpty(formInline?.alarmTitle) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.alarmLevel'>
			{{ isNullOrEmpty(EVENTLEVELTEXT[formInline?.alarmLevel]) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.confirm'>
			<el-tag :type="CONFIRMSTATUSTEXT[formInline.confirm]?.type" :key="formInline.confirm">
				{{ CONFIRMSTATUSTEXT[formInline.confirm]?.label }}</el-tag>
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.alarmType'>
			<el-tag :type="ALARMTYPES[formInline.alarmType]?.type" :key="formInline.alarmType">
				{{ isNullOrEmpty(ALARMTYPES[formInline.alarmType]?.label) }}
			</el-tag>
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.dealStatus'>
			<el-tag :type="HANDLESTATUSTEXT[formInline.dealStatus]?.type" :key="formInline.dealStatus">
				{{isNullOrEmpty(formInline?.dealStatus)}}
			</el-tag>
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.dealView'>
			{{ isNullOrEmpty(formInline?.dealView) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.createdAt'>
			{{ isNullOrEmpty(formInline?.createdAt) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.place'>
			{{ isNullOrEmpty(formInline?.place) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.confirmByName'>
			{{ isNullOrEmpty(formInline?.confirmByName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.noticeUsers'>
			{{ isNullOrEmpty(formInline?.noticeUsers) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.img'>
			<span v-if="!formInline?.img || formInline?.img=='[]' || formInline?.img==''">--</span>
			<ReUpload v-model:files="formInline.img" :isView="true" :limit="6"></ReUpload>
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.confirmAt'>
			{{ isNullOrEmpty(formInline?.confirmAt) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.unityName'>
			{{ isNullOrEmpty(formInline?.unityName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.useType'>
			{{ isNullOrEmpty(formInline?.useType) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.useTypeName'>
			{{ isNullOrEmpty(formInline?.useTypeName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.superviseUnityName'>
			{{ isNullOrEmpty(formInline?.superviseUnityName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.createdAt'>
			{{ isNullOrEmpty(formInline?.createdAt) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.nickname'>
			{{ isNullOrEmpty(formInline?.nickname) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.productId'>
			{{ isNullOrEmpty(formInline?.productId) }}
		</el-descriptions-item>
	</el-descriptions>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref } from "vue";
import { titles } from './index';
import ReUpload from "@/components/ReUpload/index.vue";
import {
  EVENTLEVELTEXT,
  CONFIRMSTATUSTEXT,
  ALARMTYPES,
  HANDLESTATUSTEXT
} from "@/constant/alarm-mangenment";
import type { infoType } from '@/api/large-data-screen/component/supervise-alarm/index';
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const ruleFormRef = ref();
//  const newFormInline = ref(props.formInline as any);
//
//
//  watch(()=>props.formInline,()=>{
//  	newFormInline.value = props.formInline
//  },{
//  	deep:true,
//  	immediate:true
//  })

function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
